<!-- 健康科普的内容组件 -->
<template>
	<view class="newsbox" v-if="item">
		<view class="pic">
			<image :src="item.picurl" mode="aspectFull"></image>
		</view>
		<view class="text">
			<view class="title">{{item.title}}</view>
			<view class="info" v-if="item">
				<text>{{item.publisher}}</text>
				<text>{{item.pubTime}}</text>
			</view>
			<!-- <view class="info" v-else>
				<text>浏览时间:{{item.browsertime}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"HealthInfoBox",
		props: {
			item: {
				type:Object,
				default(){
					return{
						title:"组件内默认标题",
						publisher: "张三",
						hits: 999,
						picurl: "../../static/logo.png",
						pubTime: "2024-10-17 21:00",
						browsertime: "2024-10-17 21:00"
					}
				}
				
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.newsbox{
	// 让图片和文字展示在一行
	display: flex;
	.pic{
		padding-left: 0px;
		width: 230rpx;
		height: 160rpx;
		// 修改图片默认宽高
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text{
		// border: 1px solid red;
		flex: 1;
		// 图片和文字的距离
		padding-left: 20rpx;
		// 让标题和作者在盒子的上下
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-size: 34rpx;
			color: #333;
			// 两行省略显示
			width: 220px;
			height: 50px;
			line-height: 25px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow:hidden
		}
		.info{
			font-size: 28rpx;
			color: #999;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			text{
				padding-right: 30rpx;
			}
		}
	}
}
</style>